<template>
  <div class="sy">
    <!-- 播放器 -->
    <div class="box">
      <div class="player">
        <div class="song-info">
          <div class="song-title">{{ info.song_title }}</div>
          <div class="play-num">
            <span>{{ info.play_num }}</span>
            播放
          </div>
        </div>
        <div class="song-details">
          <img :src="imgUrl" alt="" />
          <div class="song-intro-cont">介绍:{{ info.song_intro_cont }}</div>
        </div>
        <div class="control">
          <div class="yuan">
            <img :src="zantingImg" alt="" />
            <!-- <img :src="bofangImg" alt=""> -->
          </div>
          <div class="passTime">00:00</div>
          <div class="progressBar">
            <div class="progressBar-remain"></div>
          </div>
          <div class="totalTime">05:25</div>
        </div>
      </div>
    </div>
    <audio src="" controls id="audio" style="display: none"></audio>
    <!-- /播放器 -->

    <!-- 文章 -->
    <div class="common-deatails">
      <!-- 左边侧栏 -->
      <div class="artical-cont">
        <div class="yj-artical">
          <h3>{{ article.interestingInfo.interest_title }}</h3>
          <div class="yj-artical-info">
            <div class="eye-wechat">
              <span id="eye_num" class="eye-wechat-num"
                >浏览:{{ article.interestingInfo.eye_num }}</span
              >
              <span id="wei_chat_num" class="eye-wechat-num"
                >留言:{{ article.interestingInfo.wei_chat_num }}</span
              >
            </div>
            <div class="create-time">
              <span class="currentDate"
                >创建时间:{{
                  article.interestingInfo.interest_create_time
                }}</span
              >
            </div>
          </div>
        </div>
        <div class="artical-cont-details">
          <div class="blog-details" id="blog_details">
            <div class="user-pre-cont" v-html="str"></div>
            <div><br /></div>
            <div><br /></div>
            <img :src="shuangjiangUrl" class="info-img" />
            <img :src="shuangjiangUrl" class="info-img" />
            <img :src="shuangjiangUrl" class="info-img" />
            <div class="blog-labels">
              <span class="label" v-for="item in arr" :key="item.name">{{
                item.name
              }}</span>
            </div>
            <div class="endIcon">
              <img :src="logoUrl" alt="" class="endIcon-img" />
            </div>
            <div class="related-read">
              <div class="related-read-title">
                <p class="related-read-p">相关阅读</p>
              </div>
              <div class="related-read-cont clearFix">
                <div
                  class="related-read-cont-show"
                  v-for="(item, index) in readList"
                  :key="index"
                >
                  <img :src="readImg" alt="" class="related-img" />
                  <p class="related-p">{{ item.related_read_summary }}</p>
                </div>
              </div>
              <div class="related-read-share clearFix">
                <div class="share-left">
                  <div class="share-left-icons">
                    <img :src="weiboImg" alt="" class="share-left-img" />
                    <img :src="weixinImg" alt="" class="share-left-img" />
                    <img :src="wandouImg" alt="" class="share-left-img" />
                    <img :src="douImg" alt="" class="share-left-img" />
                  </div>
                  <span class="share-left-span">喜欢的话就风向出去吧!</span>
                </div>
                <div class="share-right">
                  <div class="share-right-box1">分享微博</div>
                  <div class="share-right-box2">
                    <img :src="zanImg" alt="" class="share-right-img" />
                    赞45
                  </div>
                  <div class="share-right-box3">
                    <img :src="shoucangImg" alt="" class="share-right-img" />
                    收藏
                  </div>
                  <div class="share-right-box4">举报</div>
                </div>
              </div>
            </div>
            <div class="blog-comment">
              <div class="who-zan">
                <h4>
                  <div class="who-zan-back"></div>
                  赞过的人
                </h4>
                <div class="who-zan-list">
                  <div class="who-zan-people">
                    <img :src="xuxiImg" alt="" class="who-zan-people-head" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                  <div class="who-zan-people">
                    <img :src="xuxiImg" alt="" class="who-zan-people-head" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                  <div class="who-zan-people">
                    <img :src="xuxiImg" alt="" class="who-zan-people-head" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                  <div class="who-zan-people">
                    <img :src="xuxiImg" alt="" class="who-zan-people-head" />
                    <span class="who-zan-people-name">许西</span>
                  </div>
                </div>
              </div>
              <div class="theme-pic">
                <img :src="tiyanImg" alt="" class="theme-img" />
              </div>
              <div class="ts-pocomment-ping">
                <!-- <input type="text" class="comment-box" placeholder="在这里发表您的看法吧~"> -->
                <textarea
                  class="comment-box"
                  placeholder="在这里发表您的看法吧~"
                ></textarea>
                <button class="comment">评 论</button>
                <div class="ts-pocomment">
                  <span class="ts-popcomicon">
                    <img :src="touxiangImg" alt="" class="ts-popcomicon-img" />
                  </span>
                  <div class="ts-comcont">
                    <b>{{ xiaoxia[0].user_name }}</b>
                    <i>{{ xiaoxia[0].comment_time }}</i>
                    <p>{{ xiaoxia[0].comment_cont }}</p>
                    <span class="ts-cardfoot-icon">
                      <img
                        :src="xiaoweixinImg"
                        alt=""
                        class="ts-cardfoot1"
                        @click="show"
                      />
                      <i>{{ xiaoxia[0].comment_zan }}</i>
                      <img :src="zanImg" class="ts-cardicon2" />
                      <i>{{ xiaoxia[0].comment_look }}</i>
                    </span>
                  </div>
                  <div class="reflex-baffle" v-if="isShow">
                    <input type="text" class="reflex-baffle-inp" />
                    <button class="reply">回复</button>
                    <span class="up">^</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /左边侧栏 -->
      <!-- 右边侧栏 -->
      <div class="artical-other">
        <div class="msg-center">
          <div class="msg-center-up">
            <div class="bluerberrypaiIcon">
              <img :src="lanmeiImg" alt="" class="bluerberrypaiIcon-img" />
              <h1 class="bluerberrypaiIcon-h1">蓝莓派</h1>
            </div>
            <div class="square-btn">
              <p class="tiezi-num" id="tiezi_num">{{ article.tiezi_num }}</p>
              <p class="tiezi-name">帖子</p>
            </div>
            <div class="square-btn">
              <p class="tiezi-num" id="comment_num">
                {{ article.comment_num }}
              </p>
              <p class="tiezi-name">评论</p>
            </div>
            <div class="square-btn">
              <p class="tiezi-num" id="concern_num">
                {{ article.concern_num }}
              </p>
              <p class="tiezi-name">关注</p>
            </div>
          </div>
          <div class="msg-center-down">
            <div class="circle-btn concern">
              <img :src="guanzhuImg" alt="" class="circle-btn-img" />
              <div class="circle-btn-zi">关注</div>
            </div>
            <div class="circle-btn">
              <img :src="sixinImg" alt="" class="circle-btn-img" />
              <div class="circle-btn-zi">私信</div>
            </div>
          </div>
        </div>
        <div class="other-blog">
          <h3 class="other-blog-title">
            作业的其他文章
            <div class="other-blog-box">全部</div>
          </h3>
          <ul
            class="other-blog-list"
            v-for="(item, index) in otherArticles"
            :key="index"
          >
            <li>{{ item }}</li>
          </ul>
        </div>
        <div class="hot-recomment">
          <h3 class="other-blog-title">
            热门推荐
            <div class="other-blog-box">更多</div>
          </h3>
          <ul
            class="other-blog-list"
            id="blog-list"
            v-for="(item, index) in hotList"
            :key="index"
          >
            <li class="blog-lis">
              {{ item }}
              <!-- <div class="blog-list-box"></div> -->
            </li>
          </ul>
        </div>
      </div>
      <!-- /右边侧栏 -->
    </div>
    <!-- /文章 -->
  </div>
</template>

<script>
import api from "../api/index";
export default {
  data() {
    return {
      info: {},
      imgUrl: "http://iwenwiki.com/api/blueberrypai/indexImg/naying.png",
      article: {},
      str: "",
      shuangjiangUrl: require("../assets/img/shuangjiang.jpg"),
      logoUrl: require("../assets/img/logourl.png"),
      readImg: require("../assets/img/related-read_03.png"),
      weiboImg: require("../assets/img/shareIcon_03.png"),
      weixinImg: require("../assets/img/shareIcon_05.png"),
      wandouImg: require("../assets/img/shareIcon_07.png"),
      douImg: require("../assets/img/shareIcon_09.png"),
      zanImg: require("../assets/img/zan-big_03.png"),
      shoucangImg: require("../assets/img/favorites_03.png"),
      xuxiImg: require("../assets/img/tupian_07.png"),
      tiyanImg: require("../assets/img/comment-pic_03.png"),
      touxiangImg: require("../assets/img/touxiang.png"),
      xiaoweixinImg: require("../assets/img/pinglun_05.png"),
      lanmeiImg: require("../assets/img/aside-logo_03.png"),
      sixinImg: require("../assets/img/sixin.png"),
      guanzhuImg: require("../assets/img/guanzhu.png"),
      bofangImg: require("../assets/img/pause.png"),
      zantingImg: require("../assets/img/play-btn_03.png"),
      xiaoxia: [],
      otherArticles: [],
      hotList: [],
      isShow: false,
      arr: [
        {
          name: "旅游",
        },
        {
          name: "资讯",
        },
        {
          name: "穷游",
        },
      ],
      readList: [],
    };
  },
  mounted() {
    api
      .info({
        song: "mo",
      })
      .then((res) => {
        console.log(res.data.songInfo);
        this.info = res.data.songInfo;
      });
    api.article({}).then((res) => {
      console.log(res.data);
      this.article = res.data;
      var str = res.data.interestingInfo.interest_cont.replace(
        /\r\n/g,
        "<br/>"
      );
      this.str = str;
      this.readList = res.data.related_read;
      this.xiaoxia = res.data.comment;
      this.otherArticles = res.data.other_interest;
      this.hotList = res.data.hot_recomment;
    });
  },
  methods: {
    show() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style lang="less" scoped>
.sy {
  text-align: left;
}

/* header */
.box {
  width: 1200px;
  margin: 0 auto;
}
.player {
  height: 466px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  margin-top: 60px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.1);
}
.song-info {
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
}
.song-title {
  width: 302px;
  height: 70px;
  font-size: 18px;
  color: #1b1b1b;
  float: left;
  line-height: 70px;
  text-align: center;
}
.play-num {
  float: right;
  line-height: 70px;
  font-size: 14px;
  margin-right: 40px;
  color: #a1a1a1;
}
.play-num span {
  margin-right: 5px;
  color: #109d59;
}
.song-details {
  height: 260px;
  background-color: #999;
  background: url(http://iwenwiki.com/api/blueberrypai/indexImg/song-background_03.png);
  padding: 40px;
}
.song-details img {
  width: 260px;
  height: 260px;
  border-radius: 5px;
}
.song-intro-cont {
  float: right;
  width: 830px;
  height: 250px;
  color: #fff;
  font-size: 16px;
}
.control {
  height: 56px;
  line-height: 56px;
}
.control > div {
  float: left;
}
.control .yuan {
  border: 1px solid #999;
  width: 40px;
  height: 40px;
  margin-top: 8px;
  border-radius: 50%;
  margin-left: 30px;
  margin-right: 20px;
  position: relative;
}
.control .yuan img {
  position: absolute;
  width: 18px;
  height: 18x;
  left: 12px;
  top: 12px;
}
.control .progressBar {
  width: 900px;
  height: 10px;
  background-color: #d3ede0;
  margin-left: 20px;
  margin-top: 23px;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 50px;
}
.control .progressBar-remain {
  width: 0%;
  height: 10px;
  background-color: #109d59;
}
.control .passTime {
  width: 50px;
  height: 56px;
}
.control .totalTime {
  width: 50px;
  height: 56px;
}

/* 文章 做边侧边栏 */
.common-deatails {
  width: 1200px;
  height: 1000px;
  margin: 0 auto;
}
.artical-cont {
  float: left;
  width: 810px;
  height: 3110px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0, 0, 0, 0.1);
}
.yj-artical {
  border-bottom: 1px solid #e0e0e0;
  height: 100px;
  margin-bottom: 30px;
}
.yj-artical h3 {
  text-align: center;
  font-size: 22px;
}
.yj-artical-info {
  line-height: 54px;
}
.eye-wechat {
  float: left;
  width: 200px;
  height: 54px;
}
.eye-wechat span {
  float: left;
  height: 54;
  margin-right: 43px;
  line-height: 54px;
  color: #999;
}
.create-time {
  width: 150px;
  height: 54px;
  float: right;
  color: #999;
  text-align: center;
  line-height: 54px;
}
.artical-cont-details {
  width: 810px;
  height: 270px;
}
.blog-details {
  width: 100%;
}
.info-img {
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 810px;
  height: 360px;
  margin-top: 20px;
}
.user-pre-cont {
  width: 100%;
  height: 270px;
  font-size: 14px;
  color: #666666;
}
.blog-labels {
  margin-top: 20px;
  border-top: 1px solid #ded7d7;
  padding: 10px 0 0 20px;
  width: 790px;
  height: 20px;
}
.label {
  color: #fff;
  display: inline-block;
  background: #999;
  text-align: center;
  padding: 0 10px;
  border-radius: 20px;
  margin-left: 10px;
  font-size: 12px;
  height: 16px;
}
.endIcon {
  width: 810px;
  height: 172px;
  text-align: center;
}
.endIcon .endIcon-img {
  width: 56px;
  height: 84px;
  margin-top: 42px;
}
.related-read {
  width: 810px;
  height: 555px;
}
.related-read-title {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  width: 810px;
  height: 20px;
}
.related-read-p {
  font-size: 16px;
  color: #4d4d4d;
}
.related-read-cont {
  padding: 10px 0;
  width: 810px;
  height: 380px;
  /* box-sizing: border-box; */
}
.related-read-cont-show {
  width: 389px;
  height: 170px;
  margin-right: 30px;
  margin-bottom: 20px;
  float: left;
}
.related-read-cont-show:nth-child(2n) {
  margin-right: 0;
}
.related-read-cont-show .related-img {
  width: 389px;
  height: 130px;
}
.related-read-cont-show .related-p {
  width: 389px;
  height: 40px;
  line-height: 40px;
}
.related-read-share {
  width: 800px;
  height: 74px;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 5px;
}
.share-left {
  width: 205px;
  height: 74px;
  float: left;
}
.share-left-icons {
  width: 210px;
  height: 44px;
}
.share-left-icons .share-left-img {
  width: 44px;
  height: 44px;
  display: inline-block;
  margin-right: 5px;
}
.share-left-span {
  color: #999999;
  font-size: 14px;
  line-height: 30px;
  text-indent: 2px;
}
.share-right {
  width: 293px;
  height: 36px;
  float: right;
  position: relative;
}
.share-right-box1 {
  /* width: 70px;
    height: 19.2px; */
  display: inline-block;
  padding: 9px 12px;
  text-align: center;
  background: #e5f2f5;
  border-radius: 20px;
  color: #14abd1;
  margin-right: 10px;
  font-size: 14px;
}
.share-right-box2 {
  /* width: 55px;
    height: 19.2px; */
  display: inline-block;
  padding: 7px 12px;
  text-align: center;
  border: 1px solid #9da09e;
  border-radius: 20px;
  background: #fff;
  margin-right: 10px;
  color: #999;
  font-size: 14px;
}
.share-right-box3 {
  /* width: 52px;
    height: 19.2px; */
  display: inline-block;
  padding: 7px 12px;
  text-align: center;
  border: 1px solid #9da09e;
  border-radius: 20px;
  background: #fff;
  margin-right: 10px;
  color: #999;
  font-size: 14px;
}
.share-right-box4 {
  /* width: 28px;
    height: 19.2px; */
  position: absolute;
  bottom: -30px;
  right: 11px;
  display: inline-block;
  padding: 0;
  text-align: center;
  border: none;
  border-radius: 0;
  background: #fff;
  color: #999;
  margin: 0;
}
.share-right-img {
  width: 16px;
  height: 17px;
  text-align: center;
  color: #999999;
  /* line-height:20px; */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.blog-comment {
  width: 810px;
  height: 700px;
}
.who-zan {
  width: 810px;
  height: 140px;
}
.who-zan h4 {
  width: 810px;
  height: 50px;
  margin-bottom: 10px;
  position: relative;
  font-size: 14px;
  line-height: 50px;
  padding-left: 5px;
}
.who-zan-back {
  width: 4px;
  height: 35%;
  background: #f68344;
  position: absolute;
  top: 16px;
  left: 0;
}
.who-zan-list {
  width: 810px;
  height: 80px;
}
.who-zan-people {
  width: 50px;
  height: 80px;
  float: left;
  margin-right: 20px;
}
.who-zan-people-head {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.who-zan-people-name {
  text-align: center;
  line-height: 30px;
  width: 50px;
  height: 30px;
  display: block;
}
.theme-pic {
  width: 810px;
  height: 124px;
  margin: 40px 0;
}
.theme-img {
  width: 809px;
  height: 120px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ts-pocomment-ping {
  width: 810px;
  height: 20px;
}
.comment-box {
  width: 810px;
  height: 100px;
  outline: none;
  border: #ddd 1px solid;
  background: #f5f5f5;
  color: #000;
  vertical-align: top;
}
.comment {
  width: 80px;
  height: 35px;
  background: orange;
  color: white;
  border-radius: 5px;
  border: none;
  margin-top: 15px;
  float: right;
  font-size: 13px;
}
.ts-pocomment {
  widows: 810px;
  height: 111px;
  margin-top: 60px;
  position: relative;
}
.ts-pocomment:first-child {
  border-top: 1px solid #e4e4e4;
}
.ts-popcomicon {
  width: 50px;
  height: 50px;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin-top: 25px;
  margin-left: 30px;
}
.ts-popcomicon-img {
  width: 50px;
  height: 49px;
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ts-comcont {
  width: 533px;
  height: 46px;
  display: inline-block;
  vertical-align: top;
  margin-top: 25px;
  margin-bottom: 40px;
  font-size: 14px;
  color: #0b0b0b;
  line-height: 22px;
}
.ts-comcont > b {
  font-size: 14px;
  padding: 0 10px;
  color: #333333;
}
.ts-comcont > i {
  font-size: 12px;
  color: #999999;
}
.ts-comcont > p {
  font-size: 14px;
  color: #0b0b0b;
  margin: 5px 0 0 10px;
  line-height: 22px;
}
.reflex-baffle {
  width: 765px;
  height: 100px;
  padding-left: 45px;
  background: rgb(245, 244, 244);
  position: relative;
}
.reflex-baffle-inp {
  background: white;
  outline: none;
  border: #eee 1px solid;
  width: 680px;
  height: 20px;
  margin-top: 15px;
}
.reply {
  width: 55px;
  height: 22px;
  border: none;
  font-size: 13px;
  border-radius: 2px;
  background: orange;
  margin-left: 10px;
  margin-top: 15px;
  color: white;
}
.up {
  color: #ccc;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.ts-cardfoot-icon {
  width: 90px;
  height: 20px;
  top: 90px;
  right: 10px;
  position: absolute;
  bottom: 10px;
}
.ts-cardfoot1 {
  display: block;
  width: 20px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 42px;
  /* background: url(../img/zan_05.png) no-repeat center center; */
  cursor: pointer;
}
.ts-cardfoot-icon i {
  padding: 5px;
  color: #ccc;
  margin-left: 15px;
  font-style: normal;
}
.ts-cardicon2 {
  display: block;
  width: 20px;
  height: 14px;
  position: absolute;
  top: 1px;
  left: 0px;
  /* background: url(../img/pinglun_05.png) 0 -73px no-repeat; */
  cursor: pointer;
}
/* 文章 左边侧边栏结束 */

/* 右边侧边栏 */
.artical-other {
  width: 301px;
  height: 892px;
  float: right;
  border-radius: 3px;
}
.msg-center {
  width: 301px;
  height: 362px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  background: #fff;
  border-radius: 5px;
}
.msg-center-up {
  width: 261px;
  height: 200px;
  padding: 20px;
}
.bluerberrypaiIcon {
  width: 261px;
  height: 80px;
  margin: 20px auto;
}
.bluerberrypaiIcon-img {
  width: 80px;
  height: 80px;
  float: left;
  display: block;
}
.bluerberrypaiIcon-h1 {
  float: left;
  display: block;
  width: 180px;
  height: 80px;
  line-height: 80px;
  font-size: 16px;
  font-weight: 700;
  text-indent: 20px;
}
.square-btn {
  float: left;
  width: 82px;
  height: 55px;
  text-align: center;
  margin-right: 7px;
  line-height: 25px;
  padding-top: 5px;
  margin-bottom: 20px;
  background: #fafafa;
}
.square-btn:last-child {
  margin-right: 0px;
}
.tiezi-num {
  width: 82px;
  height: 25px;
}
.tiezi-name {
  width: 82px;
  height: 25px;
}
.msg-center-down {
  width: 191px;
  height: 82px;
  padding: 20px 55px;
}
.concern {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #14abd1;
  float: left;
  margin-right: 60px;
  position: relative;
  /* background: url(../image/singer/guanzhu.png) center top no-repeat; */
  cursor: pointer;
}
.circle-btn-zi {
  height: 20px;
  display: block;
  position: absolute;
  top: 65px;
  left: 17px;
  color: rgb(153, 153, 153);
}
.circle-btn-img {
  width: 60;
  height: 60px;
}
.circle-btn {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  float: left;
  position: relative;
  cursor: pointer;
}
.other-blog {
  width: 261px;
  height: 195px;
  padding: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  background: #fff;
  border-radius: 5px;
}
.other-blog-title {
  width: 261px;
  height: 24px;
  font-size: 18px;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 18px;
  position: relative;
  margin-bottom: 8px;
}
.other-blog-box {
  width: 40px;
  height: 14px;
  position: absolute;
  top: 3px;
  right: 0;
  font-size: 14px;
  color: #a9a9a9;
}
.other-blog li {
  width: 261px;
  height: 36;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 16px;
}
.hot-recomment {
  width: 261px;
  height: 195px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
}
.other-blog li:hover {
  color: #109d59;
}
.blog-lis {
  width: 261px;
  height: 36;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 16px;
  padding-left: 24px;
  position: relative;
}
.blog-lis:hover {
  color: #109d59;
}
.blog-list-box {
  background-color: #109d59;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 9.5px;
  left: 4px;
}
/* /右边侧边栏 */
</style>
